Search for notes by fellow students, in your own course and all over the country.

Browse our notes for titles which look like what you need, you can preview any of the notes via a sample of the contents. After you're happy these are the notes you're after simply pop them into your shopping cart.

My Basket

Buy These Notes

You have nothing in your shopping cart yet.

Title: Reactjs Interview Questions
Description: React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.in this notes i have done 300+ interview questions and answers so that is best for interview from my side

Buy These Notes Preview

Document Preview

Extracts from the notes are below, to see the PDF you'll receive please use the links above

its arguments changes
� Back to Top
183
...
Redux Form can be used with raw
HTML5 inputs, but it also works very well with common UI frameworks
like Material UI, React Widgets and React Bootstrap
...

What are the main features of Redux Form?
Some of the main features of Redux Form are:
1
...

2
...

3
...

� Back to Top
185
...

91

For example, you can add redux-thunk and logger passing them as arguments to applyMiddleware():
import { createStore, applyMiddleware } from 'redux'
const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore)
� Back to Top
186
...

How Relay is different from Redux?
Relay is similar to Redux in that they both use a single store
...
Relay caches the data for you and
optimizes data fetching for you, by fetching only changed data and nothing
more
...

What is an action in Redux?
Actions are plain JavaScript objects or payloads of information that send
data from your application to your store
...
Actions must have a type property that indicates
the type of action being performed
...

What is the difference between React Native and React?
React is a JavaScript library, supporting both front end web and being
run on the server, for building user interfaces and web applications
...

� Back to Top
189
...

You can run the app in your mobile using expo app (https://expo
...

� Back to Top
190
...
log, console
...
As of React Native v0
...

93

How to debug your React Native?
Follow the below steps to debug React Native app:
1
...

2
...

3
...

4
...

5
...

React supported libraries & Integration
� Back to Top
192
...
It was originally written to compute derived data from Redux-like
applications state, but it can’t be tied to any architecture or library
...
If the the same
inputs are provided twice ivalue = this
...
*/
}
render() {
let value = this
...
contextType = MyContext;
2
...

133

class MyClass extends React
...
context;
/* render something based on the value */
}
}
� Back to Top
280
...

It requires a function as a child which receives current context value as
argument and returns a react node
...

Lets take a simple example,
...
Consumer>
� Back to Top
281
...

For example, the code below will re-render all consumers every time the
Provider re-renders because a new object is always created for value
...
Component {
render() {
return (

);
}
}
This can be solved by lifting up the value to parent state,

134

class App extends React
...
state = {
value: {something: 'something'},
};
}
render() {
return (
...
value}>

);
}
}
� Back to Top
282
...
It is handled
differently by React just like key
...
In this case, you can use Forward Ref API
...
forwardRef API
...
Component {
componentDidUpdate(prevProps) {
console
...
log('new props:', this
...
rest} = this
...
rest} />;
}
}
return React
...
props} forwardedRef={ref} />;
});
}
Let’s use this HOC to log all props that get passed to our “fancy button”
component,
class FancyButton extends React
...

}
//
...
In this case,
you can set focus to button element
...
/FancyButton';
const ref = React
...
current
...

Is ref argument available for all functions or class components?
Regular function or class components don’t receive the ref argument, and
ref is not available in props either
...
forwardRef call
...

Why do you need additional care for component libraries while
using forward refs?
When you start using forwardRef in a component library, you should treat
it as a breaking change and release a new major version of your library
...
These changes can
break apps and other libraries that depend on the old behavior
...

How to create react class components without ES6?
If you don’t use ES6 then you may need to use the create-react-class
module instead
...

When do you need to use refs?
There are few use cases to go for refs,
1
...

2
...

3
...

� Back to Top
290
...
i
...
Lets take an example with the children prop for render props,
(

The mouse position is {mouse
...
y}

)}/>
Actually children prop doesn’t need to be named in the list of “attributes”
in JSX element
...
x}, {mouse
...

Mouse
...
func
...

What are the problems of using render props with pure components?
If you create a function inside a render method, it negates the purpose
of pure component
...
You can solve this issue by defining the
render function as instance method
...

How do you create HOC using render props?
You can implement most higher-order components (HOC) using a regular
component with a render prop
...

function withMouse(Component) {
return class extends React
...
this
...

� Back to Top
293
...
If your
application renders long lists of data then this technique is recommended
...

� Back to Top
294
...
If you still want to display them then you
need to convert it to string
...

� Back to Top
295
...
g
...

For example, dialogs, global message notifications, hovercards, and
tooltips
...

How do you set default value for uncontrolled component?
In React, the value attribute on form elements will override the value in
the DOM
...
To
handle this case, you can specify a defaultValue attribute instead of
value
...
handleSubmit}>

User Name:
defaultValue="John"
type="text"
142

ref={this
...
But you need to use
defaultChecked for checkbox and radio inputs
...

What is your favorite React stack?
Even though the tech stack varies from developer to developer, the most
popular stack is used in react boilerplate project code
...
You can clone the project
https://github
...

� Back to Top
298
...

You can update HTML directly
...

How to add Bootstrap to a react application?
Bootstrap can be added to your React app in a three possible ways,

143

1
...

Add both bootstrap CSS and JS resources in a head tag
...
Bootstrap as Dependency: If you are using a build tool or a module
bundler such as Webpack, then this is the preferred option for adding
Bootstrap to your React application
npm install bootstrap
3
...
Below packages are
popular in this category,
1
...
reactstrap
� Back to Top
300
...

2
...

4
...

6
...

8
...

10
...

Is it recommended to use CSS In JS technique in React?
React does not have any opinion about how styles are defined but if you are
a beginner then good starting point is to define your styles in a separate
*
...
This functionality
is not part of React but came from third-party libraries
...

� Back to Top

144

302
...
But you can try Hooks in a few components(or new components)
without rewriting any existing code
...

� Back to Top
303
...

Let’s take an example in which it fetches list of react articles from the API
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
(async () => {
const result = await axios(
'http://hn
...
com/api/v1/search?query=react',
);
setData(result
...
hits
...
objectID}>
...
title}

))}

);
}
export default App;

145

Remember we provided an empty array as second argument to the effect
hook to avoid activating it on component updates but only on mounting
of the component
...
e, It fetches only on component mount
...

Is Hooks cover all use cases for classes?
Hooks doesn’t cover all use cases of classes but there is a plan to add
them soon
...

� Back to Top
305
...
8 release for
below packages
1
...

3
...

React
React
React
React

DOM
DOM Server
Test Renderer
Shallow Renderer

� Back to Top
306
...
The first item is the current value, and the second
is a function that updates the value
...
This is why we use
array destructuring instead
...

What are the sources used for introducing hooks?
Hooks got the ideas from several different sources
...
Previous experiments with functional APIs in the react-future repository
2
...
State variables and state cells in DisplayScript
...
Subscriptions in Rx
...
Reducer components in ReasonReact
...

How do you access imperative API of web components?
Web Components often expose an imperative API to implement its functions
...
But if you are
using third-party Web Components, the best solution is to write a React
component that behaves as a wrapper for your Web Component
...

What is formik?
Formik is a small react form library that helps you with the three major
problems,
1
...
Validation and error messages
3
...

What are typical middleware choices for handling asynchronous
calls in Redux?
Some of the popular middleware choices for handling asynchronous calls
in Redux eco system are Redux Thunk, Redux Promise, Redux Saga
...

Do browsers understand JSX code?
No, browsers can’t understand JSX code
...
The most
widely used transpiler right now is Babel
...

Describe about data flow in react?
React implements one-way reactive data flow using props which reduce
boilerplate and is easier to understand than traditional two-way data binding
...

What is react scripts?
The react-scripts package is a set of scripts from the create-react-app
starter pack which helps you kick off projects without configuring
...

� Back to Top
314
...

1
...

2
...
CSS Reset/Normalize
4
...
A fast interactive unit test runner with built-in support for coverage
reporting
6
...
An offline-first service worker and a web app manifest, meeting all
the Progressive Web App criteria
...

What is the purpose of renderToNodeStream method?
The ReactDOMServer#renderToNodeStream method is used to generate
HTML on the server and send the markup down on the initial request for
faster page loads
...
Note: Remember this method is not available in the
browser but only server
...

What is MobX?
MobX is a simple, scalable and battle tested state management solution
for applying functional reactive programming (TFRP)
...

What are the differences between Redux and MobX?
Below are the main differences between Redux and MobX,
Topic

Redux

MobX

Definition

It is a javascript library
for managing the
application state
It is mainly written in ES6

It is a library for
reactively managing the
state of your applications
It is written in
JavaScript(ES5)
There is more than one
store for storage
Used for simple
applications
Provides better
performance
Uses observable to store
the data

Programming
Data Store

Performance

There is only one large
store exist for data storage
Mainly used for large and
complex applications
Need to be improved

How it stores

Uses JS Object to store

Usage

� Back to Top
318
...
But you may find
many resources or React ecosystem uses ES6 extensively
...
Destructuring: To get props and use them in a component
“‘javascript // in es 5 var someData = this
...
someData var
dispatch = this
...
dispatch
// in es6 const { someData, dispatch } = this
...
Spread operator: Helps in passing props down into a component
“‘javascript // in es 5
// in es6 ...
Arrow functions: Makes compact syntax javascript
// es 5
var users = usersList
...
name}
})
// es 6
const users
= usersList
...
name});
� Back to Top
319
...
It allows
React to interrupt a long-running render to handle a high-priority event
...
e, When you enabled concurrent Mode, React will keep an eye on other
tasks that need to be done, and if there’s something with a higher priority
it will pause what it is currently rendering and let the other task finish
first
...
Part of an app by wrapping with ConcurrentMode
...
unstable_ConcurrentMode>
// 2
...
unstable_createRoot(domNode)
...

150

What is the difference between async mode and concurrent
mode?
Both refers the same thing
...
The name has been changed to highlight
React’s ability to perform work on different priority levels
...

� Back to Top
321
...
9?
Yes, you can use javascript: URLs but it will log a warning in the console
...

const companyProfile = {
website: "javascript: alert('Your website is hacked')",
};
// It will log a warning
...

� Back to Top
322
...
It assumes that
any function starting with ”use” and a capital letter right after it is a
Hook
...
Calls to Hooks are either inside a PascalCase function (assumed to
be a component) or another useSomething function (assumed to be
a custom Hook)
...
Hooks are called in the same order on every render
...

What is the difference between Imperative and Declarative in
React?
Imagine a simple UI component, such as a “Like” button
...

The imperative way of doing this would be:
151

if( user
...
You can imagine how complex
this could be in a real-world scenario
...
state
...

� Back to Top
324
...

2
...

4
...

How do you make sure that user remains authenticated on page
refresh while using Context API State Management?
When a user logs in and reload, to persist the state generally we add the
load user action in the useEffect hooks in the main App
...
While using
Redux, loadUser action can be easily accessed
...
js
import {loadUser} from '
...
dispatch(loadUser());
• But while using Context API, to access context in App
...
js so that App
...
Now
whenever the page reloads, no matter what route you are on, the user will
be authenticated as loadUser action will be triggered on each re-render
...
js
import
import
import
import

React from 'react';
ReactDOM from 'react-dom';
App from '
...
/context/auth/AuthState'

ReactDOM
...
StrictMode>

...
getElementById('root')
);
App
...
getItem('token');
if(!token){
dispatch({
type: ERROR
})
}
setAuthToken(token);
try {
const res = await axios('/api/auth');
153

dispatch({
type: USER_LOADED,
payload: res
...
data
})
} catch (err) {
console
...

What are the benefits of new JSX transform?
There are three major benefits of new JSX transform,
1
...
The compiled output might improve the bundle size in a small
amount
3
...

� Back to Top
327
...
i
...

Let’s take an example to look at the main differences between the old and
the new transform,
Old Transform:
import React from 'react';
function App() {
return

Good morning!!

;
}
Now JSX transform convert the above code into regular JavaScript as
below,
import React from 'react';
function App() {

154

return React
...

� Back to Top
328
...
The generated project setup includes,
1
...

3
...

Redux Toolkit and React-Redux dependencies
Create and configure Redux store
React-Redux passing the store to React components
Small “counter” example to demo how to add redux logic and ReactRedux hooks API to interact with the store from components

The below commands need to be executed along with template option as
below,
1
...
Typescript template:
npx create-react-app my-app --template redux-typescript
� Back to Top
329
...
These components allow us to load components from the backend
...

� Back to Top
330
...

� Back to Top
331
...
This can happen when
you are trying to do some computations using a state variable and unknowingly save the result in the same state variable
...
assign({}, …) or spread syntax
...

Ex: “‘javascript class A extends React
...
state = { loading: false } }
componentDidMount() { let { loading } = this
...
js, always
using setState to make updates, and returning new instances in reducers
when sending updated state values
...

156

What is the difference between useState and useRef hook?
1
...
Essentially, useRef is like a “box” that can hold a
mutable value in its (
...

2
...
While
useRef allows refrencing DOM elements
...
We cannot guarantee that these questions will actually be asked during your interview process, nor should you focus
on memorizing all of them

Buy These Notes Preview

Notesale: Turn your study into money

Already a Member? >

Search for notes by fellow students, in your own course and all over the country.

My Basket

Document Preview

Good morning!!